var img_bg = new Image();
var img_reload = new Image();
img_bg.src = "bg.png";
img_reload.src = "reload_icon.png";

var canvas;
var ctx;
var r = 80;
var cx = 600;
var cy = 300;
var old_point;
var new_point;
var cur_angle = 0;
var intervalId = -1;

function draw_reload(){
	canvas = document.getElementById('mc');
    ctx = canvas.getContext('2d');
	ctx.drawImage(img_reload, 80, 80);
}

function mousePosition(ev){
	ev = ev || window.event;
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	var doc = document.documentElement, body = document.body;
	var pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
	var pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);        
	return {x:pageX, y:pageY};
}


function second_to_str (second){
	var min = Math.floor(second/60);
	var sec = "";
	var x = Math.floor(second%60)
	if(x < 0){
		sec = "00"
	}
	else if(x < 10){
		sec += "0"+x;
	}
	else if(x == 60){
		min += 1
		sec = "00"
	}
	else{
		sec += x
	}
	return min+":"+sec;
}


function mouse_down(event) {
    old_point = mousePosition(event);
}

function mouse_up(event) {
	var new_point = mousePosition(event);
	if(new_point.x==old_point.x && new_point.y==old_point.y){
		return;
	}
	var dx1 = old_point.x-cx;
	var dy1 = old_point.y-cy;
	var dx2 = new_point.x-cx;
	var dy2 = new_point.y-cy;
	var angle = Math.acos( (dx1*dx2+dy1*dy2)/Math.sqrt((dx1*dx1+dy1*dy1)*(dx2*dx2+dy2*dy2)) )
	var c;
	if(dy2*dx1 > dy1*dx2){
		c = 1;
	}
	else{
		c = -1;
	}
	angle = angle*c;
	draw_circle(angle);
}

function draw_circle(angle){
	
    canvas = document.getElementById('mc');
    ctx = canvas.getContext('2d');
    var pat = ctx.createPattern(img_bg, 'repeat');
	
    ctx.fillStyle=pat
    ctx.sector(100, 100, r+2, 0, Math.PI * 2).fill();
    ctx.fillStyle="#BF0A10"
    ctx.sector(100, 100, r, 0, cur_angle+angle).fill();
    ctx.fillStyle="#FFFFFF"
    ctx.sector(100, 100, r*0.8, 0, cur_angle+angle).fill();
    ctx.fillStyle=pat
    ctx.sector(100, 100, r*0.6, 0, Math.PI * 2).fill();
	
	cur_angle = cur_angle+angle;
	
	ctx.font="30px consolas";
	ctx.fillStyle="#000000";
	var str = second_to_str(cur_angle/(Math.PI/1800));
	ctx.fillText(str, 60, 110);
	
	
	if(cur_angle <= 0){
		ctx.fillStyle=pat
		ctx.sector(100, 100, r+2, 0, Math.PI * 2).fill();
		draw_reload();
		clearInterval(intervalId);
		intervalId = -1;
	}
	else{
		if(intervalId==-1){
			intervalId = setInterval("draw_circle(Math.PI/1800*(-1))", 1000);
		}
	}
}

CanvasRenderingContext2D.prototype.sector = function (x, y, radius, sDeg, eDeg) {
    this.save();
    this.translate(x, y);
    this.beginPath();
    this.arc(0, 0, radius, sDeg, eDeg);
    this.save();
    this.rotate(eDeg);
    this.moveTo(radius, 0);
    this.lineTo(0, 0);
    this.restore();
    this.rotate(sDeg);
    this.lineTo(radius, 0);
    this.closePath();
    this.restore();
    return this;
}